﻿var ECar=ECar || {};
ECar.pictureScroll=ECar.pictureScroll||{};

ECar.pictureScroll=(function($){
	var html=null,
		container=null,
		wrap=null,
		carousel = null,
		carousel_copy = null,
		imges=null,
		thumbnails=null,
		thumbnails_copy=null,
		thumbnailsImgs=null,
		thmubnailsActiveImg=null,
		logo=null,
		prev=null,
		next=null,
		jqzoomA=null,
		jqzoomImg=null,
		direction='',
		thresholdFlag=false,
		thumbnailDirection='',
		thresholdThumbnailFlag=false,
		defaults={
			containerClass:'container',				//Set default classname for container.	
			largeImages:[],							//Set default large images.
			smallImages:[],							//Set default small images.			
			thumbnailImages:[],						//Set default thumbnail images.
			logoName:'',							//Set logo name
			delay:3000,								//Set default delay for autoPlay function.
			autoPlay:false,							//Set value to judge if pictureScroll auto play
			wrapWidth:600,							//Set width of wrap container			
			displayPic:1,							//Set the quantity of displaying pictures in one screen
			displayPicHeight:450,					//Set the top height of displaying pictures
			thumbnailPicTop:450,					//Set the top position of displaying thumbnail pictures			
			thumbnailDisplayPic:1,					//Set the quantity of displaying thumbnail pictures in one screen
			thumbnailPicWidth:65,					//Set width of thumbnail pictures
			thumbnailPicHeight:65,					//Set height of thumbnail pictures
			thumbnailCopy:false,					//Set if display thumbnail pictures in cycles
			btnWidth:50,							//Set width of control button
			btnHeight:60,							//Set height of control button
			btnPos:['0 0','0 0','0 0','0 0'],		//Set background position of control button(active previous, active next, disabled previous and disabled next)
			moveQuantity:1,							//Set the quantity of moving picture in one time
			speed:5,								//Set time interval to move the pictures
			space:5,								//Set distance of each step
			jqzoomDisplay:false,					//Set if display jqzoom images
			jqzoomClass:'jqzoom',					//Set class name of jqzoom
			jqzoomGallery:'',						//Set the gallery name of jqzoom
			position:'right',						//Set the position of showing zoom box
			zoomWidth: 500,							//Set width of zoom box
			zoomHeight:500,							//Set height of zoom box
			xOffset: 20,							//Set xOffset of zoom box
			yOffset: 0,								//Set yOffset of zoom box
			zoomType: 'standard',					//Set zoom type of jqzoom
			lens:true,								//Set if cover the small images with translucent layer
			preloadImages: false,					//Set if preload images
			alwaysOn:false,							//Set if always show large images
			largeImageWidth:860,					//Set width of large images
	        largeImageHeight:860,					//Set height of large images
	        errorMessage:'',						//Set error message
	        errorFn:null,							//Set error function
			callback:null							//Set callback function
		};

	function inititalize(options){					//Initalize pictureScroll
		if(html===null){			
			mergeOption(options);
			//The quantity must be less than or equal to the amount of images
			if(options.smallImages.length!==options.thumbnailImages.length){
				options['errorMessage']="The quantity of thumbnail images and small images must be same!";
				options.errorFn && options.errorFn(options.errorMessage);
				return;
			}
			if(options.jqzoomDisplay && options.smallImages.length!==options.largeImages.length){
				options['errorMessage']="The quantity of large images and small images must be same!";
				options.errorFn && options.errorFn(options.errorMessage);
				return;
			}
			if(options.thumbnailCopy && options.thumbnailDisplayPic>options.thumbnailImages.length){
				options['errorMessage']="The quantity of thumbnail display images must be larger than its total images when thumbnail pictures display in cycles!";
				options.errorFn && options.errorFn(options.errorMessage);
				return;
			}			
			initDOM(options);
			initVariable(options);			
			initStyles(options);					
			bindEvent(options,options.thumbnailImages.length>options.thumbnailDisplayPic?true:false);
			loadPic(options);
			if(options.jqzoomDisplay){
				displayJQZoom(options);
			}
			if(options.thumbnailCopy && options.autoPlay){
				autoPlay(options);
			}
			options.callback && options.callback.call(container,options);
		}
	}

	function mergeOption(options){					//Merge options and defaults value
		for(var opt in defaults){
			if(options[opt]===undefined){
				options[opt]=defaults[opt];
			}
		}
	}

	function initDOM(options){						//Initialize DOM
		var imagesNumber=0,
			thumbnailNumber=0;
		
		html="";				
		$.each(options.thumbnailImages,function(index,data){
			html+="<div><a rel=\"{gallery: '"+options.jqzoomGallery+"', smallimage:'"+options.smallImages[index]+"', largeimage:'"+options.largeImages[index]+"' }\"><img src='"+data+"' data-index='"+index+"' /></a></div>";
			thumbnailNumber++;
		});
		$('.thumbnails').append(html);
		if(options.thumbnailCopy){
			$('.thumbnails_copy').html($('.thumbnails').html());
		}
				
		options.carouselWidth=options.wrapWidth*imagesNumber/options.displayPic;
		options.thumbnailsWrapWidth=options.thumbnailPicWidth*options.thumbnailDisplayPic;
		options.thumbnailWidth=options.thumbnailPicWidth*thumbnailNumber;
	}

	function initVariable(options){					//Initialize variables
		container=$('.'+options.containerClass);
		wrap=$('.wrap');
		carousel = $('.carousel');
		carousel_copy = $('.carousel_copy');
		imges=$('.carousel img, .carousel_copy img');
		thumbnailsWrap=$('.thumbnailsWrap');
		thumbnails=$('.thumbnails');
		thumbnails_copy=$('.thumbnails_copy');
		thumbnailsImgs=$('.thumbnails img, .thumbnails_copy img');
		thmubnailsActiveImg=$('.thumbnails img:eq(0)');
		logo=$('.carousel .source');
		prevDiv=$('.prevDiv');
		nextDiv=$('.nextDiv');
		prev=$('.prev');
		next=$('.next');
		jqzoomA=$('.jqzoom');
		jqzoomImg=$('.jqzoom img');
		
		options.wrapHeight=options.thumbnailPicTop+options.thumbnailPicHeight;
		options.picWidth=options.wrapWidth/options.displayPic;
		options.picHeight=options.displayPicHeight/options.displayPic;		
		options.thumbnailLeft=0;
		
		options.btnMargin=(options.thumbnailPicHeight-options.btnHeight)/2;		
	}

	function initStyles(options){					//Initialize styles
		wrap.css({'width':options.wrapWidth+'px','height':options.wrapHeight+'px'});
		carousel.css({'width':options.carouselWidth, 'left':'0'});
		carousel_copy.css({'width':options.carouselWidth, 'left':-options.carouselWidth+'px'});
		imges.css({'width':options.picWidth+'px', 'height':options.picHeight+'px'});
		thumbnailsWrap.css({'top':options.thumbnailPicTop+'px','height':options.thumbnailPicHeight+'px','width':options.thumbnailsWrapWidth+'px'});
		thumbnails.css({'width':options.thumbnailWidth, left:options.thumbnailLeft+'px'});
		thumbnails_copy.css({'width':options.thumbnailWidth, 'left':options.thumbnailLeft-options.thumbnailWidth+'px'});
		thumbnailsImgs.css({'width':options.thumbnailPicWidth-2+'px', 'height':options.thumbnailPicHeight-2+'px', 'border':'1px solid #FFF'});
		thmubnailsActiveImg.css({'border':'1px solid #e5e5e5'});
		if(options.logoName){
			logo.addClass('source_'+options.logoName);
		}
		prevDiv.css({'top':options.thumbnailPicTop+'px', 'height':options.thumbnailPicHeight+'px', 'width':options.btnWidth});
		nextDiv.css({'top':options.thumbnailPicTop+'px', 'height':options.thumbnailPicHeight+'px', 'width':options.btnWidth, 'right':'0'});
		prev.css({'margin-top':options.btnMargin+'px', 'margin-bottom':options.btnMargin+'px', 'width':options.btnWidth, 'height':options.btnHeight});
		next.css({'margin-top':options.btnMargin+'px', 'margin-bottom':options.btnMargin+'px', 'width':options.btnWidth, 'height':options.btnHeight});
		if(options.thumbnailImages.length<=options.thumbnailDisplayPic){
			prev.css({'background-position':options.btnPos[2]});
			next.css({'background-position':options.btnPos[3]});
		}
		else{
			if(options.thumbnailCopy){
				prev.css({'background-position':options.btnPos[0]});
				next.css({'background-position':options.btnPos[1]});
			}
			else{
				prev.css({'background-position':options.btnPos[2]});
				next.css({'background-position':options.btnPos[1]});
			}
		} 
	}

	function clearPic(options){						//Clear pictureScroll
		html=null;
		mergeOption(options);
		container.html(html);
		options.callback && options.callback.call(container,options);
	}

	function bindEvent(options,flag){					//Bind event for pictureScroll
		if(flag){
			prevDiv.on('click',{options:options},prevFn);
			nextDiv.on('click',{options:options},nextFn);
		}		
		thumbnailsImgs.on('click',{options:options},bindThumbnail);
	}

	function unbindEvent(options){					//Unbind event for pictureScroll
		prevDiv.off('click');
		nextDiv.off('click');
		thumbnailsImgs.off('click');
	}

	function autoPlay(options){						//Auto play pictureScroll
		setInterval(function(){			
			moveThumbnailPic(options,'next');
		},options.delay);
	}

	function prevFn(e){								//Click previous button
		e=e||window.event;
		var options=e.data.options;		
		moveThumbnailPic(options,'prev');
	}

	function nextFn(e){								//Click next button
		e=e||window.event;
		var options=e.data.options;		
		moveThumbnailPic(options,'next');
	}

	function moveThumbnailPic(options,btn){					//Move images
		var index=0, 				
			distance=options.thumbnailPicWidth,
			lastMove=distance%options.space,
			times=lastMove===0?distance/options.space:Math.ceil(distance/options.space);
		
		if(!options.thumbnailCopy && (btn==="prev" && thumbnails.position().left===0 
			|| btn==="next" && thumbnails.position().left+thumbnails.width()===options.thumbnailsWrapWidth)){			
			return;
		}
		unbindEvent(options);
		var inteveral=setInterval(function(){
			placeThumbnailCopy(options,btn,thumbnails.position().left);			
			if(index<times-1){
				moveThumbnailOneStep(options,btn, options.space);
			}
			else if(index===times-1){
				if(lastMove===0){
					moveThumbnailOneStep(options, btn, options.space);
				}
				else{
					moveThumbnailOneStep(options,btn, lastMove);		
				}									
			}
			else{
				clearInterval(inteveral);
				bindEvent(options,true);
				if(!options.thumbnailCopy){
					setBtn(options,btn);
				}
				loadPic(options);
			}
			if(thresholdThumbnailFlag){
				resetThumbnailPos(options,btn,thumbnails.position().left);						
			}					
			index++;
		}, options.speed);
	}

	function moveThumbnailOneStep(options,btn,step){					//Carousel move one step (not include carousel copy)
		if(btn==='next'){
			thumbnails.css({'left':thumbnails.position().left-step+'px'});			
		}
		else if(btn==='prev'){
			thumbnails.css({'left':thumbnails.position().left+step+'px'});			
		}
	}

	function placeThumbnailCopy(options,btn,left){				//Judge carousel copy on which side of carousel	if needed
		if(left>0 && left<options.thumbnailsWrapWidth){
			thumbnailDirection='left';
			thresholdThumbnailFlag=true;					
		}
		else if(left+options.thumbnailWidth<options.thumbnailsWrapWidth && left+options.thumbnailWidth>0){	
			thumbnailDirection='right';
			thresholdThumbnailFlag=true;
		}				
		else{
			thresholdThumbnailFlag=false;
		}
	}

	function resetThumbnailPos(options,btn,left){		//Reset position of carousel and carousel copy		
		setThumbnailCopyPos(options);
		if(left+options.thumbnailWidth<=0 || left>=options.thumbnailsWrapWidth){
			exchangeThumbnailPos();	
		}	
	}

	function setThumbnailCopyPos(options){		//Move carousel copy following carousel
		if(thumbnailDirection==='left'){			
			thumbnails_copy.css({'left':thumbnails.position().left-options.thumbnailWidth+'px'});
		}
		else if(thumbnailDirection==='right'){			
			thumbnails_copy.css({'left':thumbnails.position().left+options.thumbnailWidth+'px'});
		}
	}

	function exchangeThumbnailPos(){
		var left=thumbnails.position().left;
		thumbnails.css({'left':thumbnails_copy.position().left+'px'});
		thumbnails_copy.css({'left':left+'px'});
	}

	function loadPic(options){
		var picNo=(-thumbnails.position().left/options.thumbnailPicWidth+options.thumbnailImages.length)%options.thumbnailImages.length;		
		$('.thumbnails img[src="'+options.thumbnailImages[picNo]+'"]').trigger('click');
	}

	function bindThumbnail(e){
		e=e||window.event;
		var options=e.data.options,
			picNo=$(this).data('index');

		setActiveImage(picNo);
		jqzoomA.attr('href', options.largeImages[picNo]);
		jqzoomImg.attr('src', options.smallImages[picNo]);
	}

	function setActiveImage(picNo){
		thumbnailsImgs.css({'border':'1px solid #FFF'});
		thmubnailsActiveImg=$('.thumbnails img:eq('+picNo+'), .thumbnails_copy img:eq('+picNo+')');
		thmubnailsActiveImg.css({'border':'1px solid #e5e5e5'});
	}

	function setBtn(options,btn){
		if(btn==="prev" && thumbnails.position().left===0){
			prev.css({'background-position':options.btnPos[2]});
			next.css({'background-position':options.btnPos[1]});
		}
		else if(btn==="next" && thumbnails.position().left+thumbnails.width()===options.thumbnailsWrapWidth){
			prev.css({'background-position':options.btnPos[0]});
			next.css({'background-position':options.btnPos[3]});
		}
		else{
			prev.css({'background-position':options.btnPos[0]});
			next.css({'background-position':options.btnPos[1]});
		}
	}

	function displayJQZoom(options){
		$('.'+options.jqzoomClass).jqzoom({
			zoomWidth: options.zoomWidth,
			zoomHeight:options.zoomHeight,
			xOffset: options.xOffset,
			yOffset: options.yOffset,
			zoomType: options.zoomType,
			lens:options.lens,
			preloadImages: options.preloadImages,
			alwaysOn:options.alwaysOn,
			largeImageWidth:options.largeImageWidth,
	        largeImageHeight:options.largeImageHeight
		});
	}

	return{
		init:function(options){
			inititalize(options);
		},
		clear:function(options){
			options=options||{};
			clearPic(options);
		}
	}

})(jQuery);


(function(){
	ECar.pictureScroll.init({			
		autoPlay:false,		
		wrapWidth:430,		
		displayPicHeight:430,
		moveQuantity:1,
		thumbnailPicTop:460,	
		largeImages:[
			'../../../../resources/img/scrollImages/largeImage/5722f81bNec46e571.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f81eNd4375b09.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f812Nb3894796.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f817N90078bf7.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f821Nf7d7082a.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f824N853826b9.jpg',
			'../../../../resources/img/scrollImages/largeImage/5722f827Na1ae844c.jpg'				
		],	
		smallImages:[
			'../../../../resources/img/scrollImages/smallImage/5722f81bNec46e571.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f81eNd4375b09.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f812Nb3894796.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f817N90078bf7.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f821Nf7d7082a.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f824N853826b9.jpg',
			'../../../../resources/img/scrollImages/smallImage/5722f827Na1ae844c.jpg'		
		],
		thumbnailImages:[
			'../../../../resources/img/scrollImages/thumbnailImage/5722f81bNec46e571.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f81eNd4375b09.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f812Nb3894796.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f817N90078bf7.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f821Nf7d7082a.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f824N853826b9.jpg',
			'../../../../resources/img/scrollImages/thumbnailImage/5722f827Na1ae844c.jpg'
		],
		thumbnailCopy:false,
		thumbnailDisplayPic:5,
		btnPos:[
			'0 0','-60px 0','-120px 0','-180px 0'
		],
		logoName:'jd',
		jqzoomDisplay:true,	
		jqzoomClass:'jqzoom',
		jqzoomGallery:'life',
		zoomWidth: 500,
		zoomHeight:500,
		xOffset: 20,
		yOffset: 0,		
		largeImageWidth:860,
        largeImageHeight:860,
        errorFn:function(errorMsg){
        	console.log(errorMsg);
        },
		callback:function(data){
			
		}
	});	
})();	  